<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>个人电子名片css模板 - 站长素材</title>
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
	
	<script type="application/x-javascript">
		addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){
			window.scrollTo(0,1);
		}
	</script>
	
	<!-- CSS -->
	<link rel="stylesheet" href="css/base.css" />
	<link rel="stylesheet" href="css/amazium.css" />
	<link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/prettyPhoto.css" />
	
	<!-- Favicons -->
	<link rel="shortcut icon" href="images/favicon.ico" />
	<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png" />
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
	
	<!-- To Top scripts -->
	
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-5.5.5-packed.js"></script>
	<script src="js/jquery.easytabs.js" type="text/javascript"></script>
	<script src="js/smoothscroll.js" type="text/javascript"></script>
	<script src="js/jquery.hashchange.min.js" type="text/javascript"></script>
    <script src="js/jquery.easytabs.min.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
	<script src="js/filterable.pack.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.tweet.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
  <header>
    	<div class="row">
            <div class="row">
                <div class="grid_3">
                    <div id="photo">
                        <img src="images/my_photo.png" alt="My Photo" />
                    </div>
                </div>
                <div class="grid_9">
                    <div class="name-wrap">
                        <h1>Jeff Fashkin <span>Front end developer</span></h1>
                    </div>
                    <div class="contact-info"> <span class="phone-icon">+23 56 896 5462</span> <span class="email-icon"><a href="#">mail@site.com</a></span>
                        
                    </div>
                    
                </div>
                
            </div>
        </div>
    </header>
    <div class="row">
    	<div class="social-icons">
            <ul>
                <li class="twitter"><a href="#">Twitter</a></li>
                <li class="facebook"><a href="#">Twitter</a></li>
                <li class="vimeo"><a href="#">Twitter</a></li>
                <li class="buzz"><a href="#">Twitter</a></li>
                <li class="dribble"><a href="#">Twitter</a></li>
            </ul>
        </div>
    </div>    
    <div id="tab-container" class='tab-container'>
        <ul class='etabs'>
            <li class='tab'><a href="#home" class="home">Home</a></li>
            <li class='tab'><a href="#web" class="about">Profile</a></li>
            <li class='tab'><a href="#about" class="social">Portfolio</a></li>
            <li class='tab'><a href="#contact" class="contact">Contact</a></li>
        </ul>
        <div class="row">
        	<div class="grid_12">
            <div class='panel-container'>
              	<div id="home" class="page">
                    <h2><span>About Me</span></h2>
                    <div class="content-wrap">
                    	<div class="row">
                            <div class="grid_6">
                                <div class="content-pad">
                                	<blockquote class="quote">
                                        I'm John Doe, a Web Designer living and working in Texas, and this is my space on the interwebs. I love to design clean and functional websites for my clients.
                                    </blockquote>
                                    <p>I attend academy of art university where i'll be receiving my bachelor of fine arts degree in web design & new media.</p>
                                    <p>I love hand-crafting beautiful, accessible and user-friendly websites. I like also good food, action and sci-fi movies, praticate sports, read comics and books, listen pop, rock and classical and travels anytime and everywhere is possible. </p>
                                </div>	
                            </div>
                            <div class="grid_3">
                            	<div class="content-pad shadow-wrap">
                                	<h3>Objective</h3>
                                    <ul class="objective">
                                    	<li>Exercitationem ullam corporis quisquam</li>
                                        <li>Consectetur, adipisci velit sed quia numqium</li>
                                        <li>Qui dolorem ipsum quia dolor sit amet lame</li>
                                        <li>Dolore eut fugiat pariaturiun eut fug odduis</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="grid_3">
                               	<div class="content-pad shadow-wrap">
                                	<h3>Contact Info</h3>
                                    <p>E-mail: <a href="#">jeff-fashkin@mail.com</a></p>
                                    <p>Phone: +1 (123) 456-7890</p>
                                    <p>Hometown: California, US</p>
                                    <p>Website: <a href="#">sitename.com</a></p>
                                    <div class="download-card">
                                    	<a href="#">Download Vcard</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix">&nbsp;</div>
                    </div>
                </div>
                <div id="web" class="page">
                    <h2><span>Profile</span></h2>
                    <div class="content-wrap">
                    	<div class="row">
                            <div class="grid_4">
                                <div class="content-pad">
                                	<h3>My Skills</h3>
                                	<ul class="my-skills">
                                    	<li>HTML / CSS <span>1</span><span>1</span><span>1</span><span>1</span><span>1</span></li>
                                        <li>Wordpress <span>1</span><span>1</span><span>1</span></li>
                                        <li>Drupal <span>1</span><span>1</span></li>
                                        <li>Photoshop <span>1</span><span>1</span><span>1</span><span>1</span></li>
                                        <li>Illustrator <span>1</span><span>1</span><span>1</span></li>
                                        <li>InDesign <span>1</span><span>1</span></li>
                                    </ul>
                                </div>	
                            </div>
                            <div class="grid_4">
                            	<div class="content-pad shadow-wrap">
                                	<h3>Education</h3>
                                	<div class="list_carousel responsive">
                                        <ul id="education">
                                            <li>
                                            	<h4>Bachelor of Fine Arts Degree <span>( 2005-2008 )</span></h4>
                                                <p>Pellentesque fermentum mi sed lorem congue sed congue purus mattis. Vestibulum enim mi, pulvinar ultricies placerat eget, condimentum non velit. Morbi in ante eu turpis aliquam pharetra et ut leo. Fusce sed dui pretium lacus pulvinar lacinia ac vel tellus. Praesent vestibulum libero massa, vitae hendrerit nulla. Integer lectus dui, pharetra eget pulvinar ac, scelerisque tristique enim. </p>                                            
                                            </li>
                                            <li>
                                            	<h4>Bachelor of Fine Arts Degree <span>( 2005-2008 )</span></h4>
                                                <p>Pellentesque fermentum mi sed lorem congue sed congue purus mattis. Vestibulum enim mi, pulvinar ultricies placerat eget, condimentum non velit. Morbi in ante eu turpis aliquam pharetra et ut leo. Fusce sed dui pretium lacus pulvinar lacinia ac vel tellus. Praesent vestibulum libero massa, vitae hendrerit nulla. Integer lectus dui, pharetra eget pulvinar ac, scelerisque tristique enim. </p>                                            
                                            </li>
                                            <li>
                                            	<h4>Bachelor of Fine Arts Degree <span>( 2005-2008 )</span></h4>
                                                <p>Pellentesque fermentum mi sed lorem congue sed congue purus mattis. Vestibulum enim mi, pulvinar ultricies placerat eget, condimentum non velit. Morbi in ante eu turpis aliquam pharetra et ut leo. Fusce sed dui pretium lacus pulvinar lacinia ac vel tellus. Praesent vestibulum libero massa, vitae hendrerit nulla. Integer lectus dui, pharetra eget pulvinar ac, scelerisque tristique enim. </p>                                            
                                            </li>
                                        </ul>                                        
                                        <div class="clearfix"></div>
                                        <div id="education-pager" class="pager"></div>
                                	</div>
                                </div>
                            	
                            </div>
                            <div class="grid_4">
                               	<div class="content-pad shadow-wrap">
                                	<h3>Work Expeirence</h3>
                                	<div class="list_carousel responsive">
                                        <ul id="work-expeirence">
                                            <li>
                                            	<h4>Web Designer/Developer <span> Marketing Firm, Inc. From ( 2007-2010)</span></h4>
                                                <p>Curabitur nulla sem, cursus et consectetur sit amet, pellentesque non magna. Sed sit amet tellus et odio egestas ultricies sit amet eu elit. Mauris sed consequat tortor. Donec sit amet risus erat, eu rutrum neque. Etiam risus nulla, egestas sodales imperdiet in, dictum at justo. Curabitur ultrices erat et velit mollis cursus scelerisque nisl ultrices. </p></li>
                                          	<li>
                                            	<h4>Web Designer/Developer <span> Marketing Firm, Inc. From ( 2007-2010)</span></h4>
                                                <p>Curabitur nulla sem, cursus et consectetur sit amet, pellentesque non magna. Sed sit amet tellus et odio egestas ultricies sit amet eu elit. Mauris sed consequat tortor. Donec sit amet risus erat, eu rutrum neque. Etiam risus nulla, egestas sodales imperdiet in, dictum at justo. Curabitur ultrices erat et velit mollis cursus scelerisque nisl ultrices. </p></li>
                                            <li>
                                            	<h4>Web Designer/Developer <span> Marketing Firm, Inc. From ( 2007-2010)</span></h4>
                                                <p>Curabitur nulla sem, cursus et consectetur sit amet, pellentesque non magna. Sed sit amet tellus et odio egestas ultricies sit amet eu elit. Mauris sed consequat tortor. Donec sit amet risus erat, eu rutrum neque. Etiam risus nulla, egestas sodales imperdiet in, dictum at justo. Curabitur ultrices erat et velit mollis cursus scelerisque nisl ultrices. </p></li>
                                        </ul>                                        
                                        <div class="clearfix"></div>
                                        <div id="expeirence-pager" class="pager"></div>
                                	</div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix">&nbsp;</div>                      
                    </div>
                </div>
                <div id="about" class="page">
                    <h2><span>Portfolio</span></h2>
                    <div class="content-wrap">
                   	  	<div class="row">
                            <div class="boundingbox" id="content">                            	
                               	<div class="grid_12">
                               		<div class="portfolio-filter">
                                        <ul id="portfolio-filter">
                                            <li><a href="#all" title="">All</a></li>
                                            <li><a href="#design" title="" rel="design">Web Design</a></li>
                                            <li><a href="#partner" title="" rel="partner">Graphic Design</a></li>
                                            <li><a href="#political" title="" rel="political">Logo</a></li>
                                            <li><a href="#university" title="" rel="university">Text</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="grid_12">
                                    <div class="portfolio-item">
                                        <ul id="portfolio-list">
                                            <li class="business ecommerce partner cms programming jquery search">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio1.jpg" title="Title goes here">
                                                        <img src="images/portfolio1.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                            <li class="nonprofit partner cms jquery">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio2.jpg" title="Title goes here">
                                                        <img src="images/portfolio2.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                            <li class="business design">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio3.jpg" title="Title goes here">
                                                        <img src="images/portfolio3.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                            <li class="nonprofit university design cms jquery video">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio4.jpg" title="Title goes here">
                                                        <img src="images/portfolio4.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                            <li class="political design cms">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio5.jpg" title="Title goes here">
                                                        <img src="images/portfolio5.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                            <li class="university partner design cms jquery">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio6.jpg" title="Title goes here">
                                                        <img src="images/portfolio6.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                            <li class="nonprofit econdev partner cms jquery search">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio7.jpg" title="Title goes here">
                                                        <img src="images/portfolio7.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                            <li class="political design cms video">
                                                <div class="portfolio-box">
                                                    <div class="portoflio-img">
                                                        <a rel="prettyPhoto" class="portfolio-item-preview" href="images/portfolio8.jpg" title="Title goes here">
                                                        <img src="images/portfolio8.jpg" class="portfolio-img pretty-box max-image" alt="" /></a>
                                                    </div>
                                                    <h3>Curabitur Nulla</h3>
                                                    <p>This is an online cricket fantasy game that let you predict player's performance and win or loose points based on the accuracy of your predictions.</p>
                                                </div>
                                            </li>
                                        <li style="overflow: hidden; clear: both; height: 0px; position: relative; float: none; display: block; background:none;"></li>
                                    </ul>
                                    </div>      
                                </div>                          
        						<div class="clearfix"></div>
                       		</div>
                        	<div class="clearfix">&nbsp;</div>                      
                    	</div>    
                	</div>
             	</div>
             
                 <div id="contact" class="page">
                        <h2><span>Contact</span></h2>
                        <div class="content-wrap">
                            <div class="row">
                                <div class="grid_6">
                                    <div class="content-pad">
                                        <h3>Say Hello</h3>
                                        <p class="contact-txt">Cras dui velit, pharetra ut eleifend et, aliquet vitae velit. Donec at convallis est. Phasellus ac leo eget massa cursus congue quis pulvinar risus. Nam sed sem ligula. Aliquam non justo in dolor egestas tempor euismod sed augue. Pellentesque varius velit quis arcu luctus pellentesque.</p>
                                        
                                        <div class="form-div">
                                            <div id="sucessmessage" class="form-row"> </div>
                                            <form id="contact_form" method="post" action="#" />
                                                <div class="form-row">
                                                    <input type="text" placeholder="First Name..." name="name" />
                                                </div>  
                                                <div class="form-row">
                                                    <input type="text" name="email" placeholder="Email..." id="email" />
                                                </div>                              
                                                <div class="form-row">
                                                    <input type="text" name="phone" placeholder="Website..." id="phone" />
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="form-row">
                                                    <textarea name="comment" placeholder="Your comments..."></textarea>
                                                </div>
                                                <div class="clearfix"></div>
                                                <div class="form-row">
                                                    <input type="submit" class="btn" value="Send" />
                                                </div>                                            
                                            </form>
                                        </div>
                                    </div>	
                                </div>
                                <div class="grid_6">
                                    <div class="content-pad">
                                        <h3>Contact Info</h3>
                                        <p>Phone :(000) - 987651234 / (000) - 987651234</p>
                                        <p>Fax :(000) - 987651234</p>
                                        <p>Email : <a href="#">youremail@yourwebsite.com</a></p>
                                        <p>Website : <a href="#">www.yourwebsite.com</a></p>
                                        
                                        <div class="contact-map">
                                            <iframe width="100%" scrolling="no" height="310" frameborder="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Manhattan,+New+York,+NY&amp;sll=37.0625,-95.677068&amp;sspn=71.810722,137.724609&amp;ie=UTF8&amp;hq=&amp;hnear=Manhattan,+New+York&amp;ll=40.783401,-73.966141&amp;spn=0.06421,0.102654&amp;z=12&amp;iwloc=A&amp;output=embed" marginwidth="0" marginheight="0" class="map"></iframe>
                                         </div>
                                    </div>	
                                </div>
                            </div>
                            <div class="clearfix">&nbsp;</div>                      
                        </div>      
                    </div>
             </div>
    	</div>
    </div>
	</div>
    <footer>
    	<div class="row">
        	<div class="grid_6">
            	Copyright © 2013 Yourname Here. 
            </div>
            <div class="grid_6">
            </div>
        </div>
    	<div class="bottom-line">&nbsp;</div>
    </footer>
    
    <p id="back-top" style="display: block;">
        <a href="#top">&nbsp;</a>
    </p>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>